@media screen and (min-width:700px) and (max-width:3000px){
    .citys-outer{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }
    .citys-outer::-webkit-scrollbar{
        width: 5px;
    }
    .citys-outer::-webkit-scrollbar-thumb{
        background-color: coral;
        border-radius: 3px;
    }
    .citys-outer::-webkit-scrollbar-track{
        background-color: rgb(230, 230, 230);
    }
    .head{
        width: 80%;
        height: 60px;
        float: left;
        margin-left: 11%;
        font-size: 22px;
    }
    .head>li{
        float: left;
        width: 12%;
        height: 30px;
        line-height: 30px;
        background-color: rgb(255, 174, 0);
    }
    .container-citys{
        float: left;
        margin-left: 10%;
        width: 80%;
    }
    #citys{
        width: 15%;
        float: left;
    }
    #citys>ul>li{
        float: left;
        margin-left: 40px;
        width: 100%;
    }
    .city{
        width:100%;
        float: left;
        background-color: blanchedalmond;
        margin-left: 2%;
    }
    .time{
        float: left;
        width: 30%;
        color: rgb(0, 190, 204);
    }
    .author{
        float: left;
        width: 40%;
        color: rgb(38, 139, 255);
    }
    .count-header{
        margin-left: 2%;
        width: 100%;
        background-color: coral;
    }
    .count-header>h3{
        font-size: 35px;
    }
    .count-inner{
        float: left;
        width: 25%;
    }
    .count-inner>li{
        float: left;
        width: 50%;
    }
    .count-body{
        margin-left: 10%;
        font-weight: 900;
        font-size: 25px;
        background-color: darkorange;
        height: 40px;
        line-height: 40px;
        width: 80%;
    }
    .cityMenu{
        position: absolute;
        right: 0;
        top: 10%;
        width: 8%;
        background-color: rgba(56, 56, 56, 0.637);
        z-index: 10000;
        text-align: center;
        font-size: 20px;
        overflow-y: scroll;
        height: 85%;
    }
    .cityMenu::-webkit-scrollbar{
        width: 5px;
    }
    .cityMenu::-webkit-scrollbar-thumb{
        background-color: coral;
        border-radius: 5px;
    }
    .cityMenu>div>ul>li{
        cursor: pointer;
        color: white;
        border-bottom: 1px rgb(134, 134, 134) solid;
        height: 30px;
        line-height: 30px;
    }
    .cityMenu>div>ul>li:hover{
        background-color: cornflowerblue;
    }
    .cityMenu>div>ul>li:focus{
        background-color: cornflowerblue;
    }
    .active{
        font-size: 25px;
        background-color: rgb(75, 75, 75);
    }
}

@media screen and (max-width:700px){
    .citys-outer{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }
    .citys-outer::-webkit-scrollbar{
        width: 2px;
    }
    .citys-outer::-webkit-scrollbar-thumb{
        background-color: coral;
        border-radius: 3px;
    }
    .citys-outer::-webkit-scrollbar-track{
        background-color: rgb(230, 230, 230);
    }
    .head{
        width:122% ; 
        height: 60px;
        float: left;
        margin-left: 1%;
        font-size: 15px;
        text-align: center;
    }
    .head>li{
        float: left;
        width: 10%;
        height: 30px;
        line-height: 30px;
        background-color: rgb(255, 174, 0);
    }
    .container-citys{
        float: left;
        margin-left: 10%;
    }
    #citys{
        width: 50%;
        float: left;
    }
    #citys>ul>li{
        float: left;
        margin-left: 40px;
        width: 100%;
    }
    .city{
        width: 100%;
        float: left;
        background-color: blanchedalmond;
    }
    .time{
        float: left;
        width: 30%;
        color: rgb(0, 190, 204);
    }
    .author{
        float: left;
        width: 40%;
        color: rgb(38, 139, 255);
    }
    .count-header{
        margin-left: 2%;
        width: 100%;
        background-color: coral;
    }
    .count-header>h3{
        font-size: 35px;
    }
    .count-inner{
        float: left;
        width: 20%;
        margin-left: 10px;
        text-align: center;
    }
    .count-inner>li{
        float: left;
        width: 100%;
        font-size: 20px;
    }
    .count-body{
        margin-left: 5%;
        font-weight: 900;
        font-size: 25px;
        background-color: darkorange;
        height: 40px;
        line-height: 40px;
        width: 90%;
    }
    .cityMenu{
        position: absolute;
        left: 0;
        top: 11%;
        width: 100%;
        background-color: rgba(56, 56, 56, 0.637);
        z-index: 10000;
        text-align: center;
        font-size: 15px;
        overflow-x: scroll;
        height: 4%;
    }
    .cityMenuInner{
        width: 600%;
    }
    .cityMenu::-webkit-scrollbar{
        height: 0px;
        width: 0;
    }
    .cityMenu::-webkit-scrollbar-thumb{
        background-color: coral;
        border-radius: 5px;
    }
    .cityMenu>div>ul>li{
        cursor: pointer;
        color: white;
        border-bottom: 1px rgb(134, 134, 134) solid;
        height: 30px;
        line-height: 30px;
        float: left;
        width: 2.94%;
    }
    .active{
        font-size: 20px;
        background-color: rgb(75, 75, 75);
    }
}
.incr{
    font-size: 15px;
    color: rgb(255, 68, 0);
}
